<template>
  <div>

    <p>桩基号: {{ message.pileNumber }}</p>
    <p>里程: {{ message.mileage }}</p>
    <p>偏距: {{ message.offset }}</p>
    <p>坐标X: {{ message.coordinateX }}</p>
    <p>坐标Y: {{ message.coordinateY }}</p>
    <p>桩底高程: {{ message.pileBottomElevation }}</p>
    <p>桩顶高程: {{ message.pileTopElevation }}</p>
    <p>桩径: {{ message.pileDiameter }}</p>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  message: {
    type: Object,
    required: true,
    validator: (value) => {
      return (
          typeof value.pileNumber === 'string' &&
          typeof value.mileage === 'number' &&
          typeof value.offset === 'number' &&
          typeof value.coordinateX === 'number' &&
          typeof value.coordinateY === 'number' &&
          typeof value.pileBottomElevation === 'number' &&
          typeof value.pileTopElevation === 'number' &&
          typeof value.pileDiameter === 'number'
      );
    }
  }
});
</script>

<style scoped>
p {
  color: blue;
}
</style>